<!--
 * @Description: 富文本编辑器
-->
<template>
  <div style="border: 1px solid #ccc; width: 100%;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
    />
    <Editor
      style="height: 300px; overflow-y: hidden; "
      v-model="content"
      @onCreated="handleCreated"
      @onBlur="handleBlur"
      :defaultConfig="editorConfig"
      ref="wangeditorRef"
      @customUpload="onCustomUpload"
    />
    <div class="btn_publish">
    <el-button block @click="publish()"  v-if='publish_flag'><span>发表</span></el-button>
  </div>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {$banseUrl} from "@/utils/utils.js";
import { ref, toRefs, computed, onMounted, shallowRef,watch } from "vue";
import { $post, $get } from "@/api/Api.js";
import { useRouter } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const props = defineProps({
  form: {
    type: Object,
    default:null,
  },
  details:{
    type: String,
    default: "",
  },
  post_url: {
    type: String,
    default: "",
  },
  publish_flag: {
    type: Boolean,
    default: true,
  },
});
let { form, post_url, publish_flag,details } = toRefs(props); //list
const emit = defineEmits(["update_comment", "blur_comment"]);
let content=ref('')
let editor=ref(null)
/**
 * 发表评论
 */
let user = ref({
  user_id: user_id,
  avatar: "/api/upload/admin_avatar.jpg",
  nickname: "admin",
})
let publish = () => {
  if (!user.value.user_id) {
    router.push("/login");
    return;
  }
  var formObj = form.value;
  formObj = Object.assign(formObj, {
    user_id: user.value.user_id,
    avatar: user.value.avatar,
    nickname: user.value.nickname,
  })
  if (!content.value) {
    ElMessage.warning("输入内容不能为空！");
    return;
  }
  var post_url_new = post_url.value;
  if (!post_url_new) {
    post_url_new = "/api/comment/add";
  }
  $post(post_url_new, formObj).then((res) => {
    if (res.result) {
      // emits("blur",content.value);
      emit("update_comment",content.value);
      // form.value.content = "";
      content.value = "";
    } else if (res.error) {
      ElMessage.warning(res.error.message);
    }
  });
}
let toolbarConfig = {
  excludeKeys: [
    "insertVideo", // 删除视频
    "uploadVideo",
    "group-video",
    "insertImage", // 删除网络图片上传
    "insertLink", // 删除链接
    "insertTable", // 删除表格
    "codeBlock", // 删除代码块
    "blockquote",
    "todo",
    "emotion",
    "fontSize",
    "fontFamily",
    "lineHeight",
    "group-more-style",
    "color",
    "bgColor",
  ],
}
// 回显数据到编辑器
let setEditorContent=()=>{
  if (editor.value) {
    editor.value.setHtml(content.value);
  }
}
//编辑器实例，必须用 shallowRef
let editorRef = shallowRef();
let handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  editor.value = editor; // 记录 editor 实例，重要！
  if (form.value.content) {
        //回显
        if(details.value!==''){
          editor.setHtml(details.value);
        }else{
          editor.setHtml(form.value.content);
        }
     
    }
}

const editorConfig = {
  MENU_CONF: {
    uploadImage: {
      server: $banseUrl+"/api/comment/upload",
      allowedFileTypes: ["image/*"],
      fieldName: "your-fileName",
      base64LimitSize: 1 * 1024 * 1024,
      // 单个文件的最大体积限制，为 3M
      maxFileSize: 1 * 1024 * 1024,
      maxNumberOfFiles: 1,
      onError(file) {
        ElMessage.warning("当前选择的图片过大！请选择1M以内");
      },
    },
  },
}
 let handleBlur = () => {
  if(publish_flag.value){
    emit("update_comment");
  }else{
    emit("update_comment",content.value);
    emit("blur_comment",content.value);
  }
};
const onCustomUpload = () => {
  // emit("update_comment",content.value);
  // emit("blur",content.value)
}
watch(
content, (n) => {
  if(!publish_flag.value){
  emit('update_comment', n)
  }
})
onMounted(()=>{
  setTimeout(()=>{
    if(details.value!==''){
      content.value=details.value
    }else{
      content.value=form.value.content
    }
    
  },200)
})
</script>

<style scoped lang="less">
.btn_publish {
  text-align: right;
  margin-top: 10px;
}
.btn_publish button {
  border-radius: 3px;
  cursor: pointer;
}
.btn_publish button:hover {
  background: var(--color_success_b);
  color: white;
}
</style>
